<script setup>
    import { inject, onMounted } from 'vue'
    import ContentCard from '../../../components/ContentCard.vue'
    import { getProjectList, getYearList } from '@/api/project'
    import { useStore } from 'vuex'

    const store = useStore()
    const props = defineProps({
        townsId: {
            type: [Number, String],
            default: null
        }
    })

    onMounted(() => {
        getYearData()
    })

    let params = $ref({
        pageNo: 1,
        pageSize: 20
    })

    const close = inject('close')

    // 点击操作按钮
    const handleClickInfo = (val, data) => {
        store.commit('project/setProjectArea', data)
        close(val)
    }

    
    let projectList = $ref([])
    let listLoading = $ref(false)

    // 总条数
    let projectCount = $ref(0)

    // 获取列表
    const getList = () => {
        listLoading = true
        getProjectList(params).then(res => {
            listLoading = false
            if(res.success){
                let { total, records } = res.result
                projectList = records
                projectCount = total
            }
        })
    }

    // 获取年度列表
    let yearData = $ref([])
    const getYearData = () => {
        getYearList().then(res => {
            console.log(res)
            yearData = res.result
        })
    }

    // 搜索
    const handleSearch = (id = params.towns) => {
        params.towns = id
        params.pageNo = 1
        getList()
    }

    // 分页
    const handleCurrentChange = (page) => {
        params.pageNo = page
        getList()
    }

    defineExpose({
        handleSearch
    })

</script>

<template>
    <content-card>
        <template #backText>
            <div class="text active">项目列表</div>
        </template>

        <template #filter>
            <el-select 
                v-model="params.year" 
                placeholder="年度"
                @change="handleSearch()"
                clearable
            >
                <el-option
                    v-for="item in yearData"
                    :key="item.id"
                    :label="item.year"
                    :value="item.id"
                />
            </el-select>
            <el-input 
                class="ml10"
                v-model="params.projectName"
                placeholder="请输入项目关键词"
            ></el-input>
            <el-button 
                class="ml10"
                type="primary"
                @click="handleSearch()"
            >
                查询
            </el-button>

        </template>

        <div class="project-list-wrap list-card-bg">
            <ul class="list-head flex-center">
                <li class="projcet-index">序号</li>
                <li class="project-name">项目名称</li>
                <li class="project-town">乡镇</li>
                <li class="project-year">年度</li>
                <li class="project-time">更新时间</li>
                <li class="project-operate">操作</li>
            </ul>
            
            <el-scrollbar class="list-warp" v-loading="listLoading">
                <ul class="list-item flex-center" v-for="(item, index) in projectList" :key="index">
                    <li class="projcet-index">{{ index+1 }}</li>
                    <li class="project-name text_overflow" :title="item.projectName">{{ item.projectName }}</li>
                    <li class="project-town text_overflow" :title="item.towns_dictText">{{ item.towns_dictText }}</li>
                    <li class="project-year">{{ item.year_dictText }}</li>
                    <li class="project-time">{{ item.updateTime }}</li>
                    <li class="project-operate">
                        <a href="javascript:;" @click="handleClickInfo('info', item)">基本信息</a>
                        <a href="javascript:;" @click="handleClickInfo('area', item)">所在区域</a>
                        <a href="javascript:;" @click="handleClickInfo('archives', item)">档案管理</a>
                    </li>
                </ul>

                <el-pagination 
                    class="mt20" 
                    background 
                    layout="prev, pager, next" 
                    :total="projectCount" 
                    :hide-on-single-page="true"
                    :page-size="params.pageSize"
                    @current-change="handleCurrentChange"
                />

            </el-scrollbar>
        </div>
    </content-card>
</template>

<style lang="less" scoped>
    .project-list-wrap{
        margin: 0 45px;
        
        .projcet-index{
            width: 80px;
            text-align: center;
        }

        .project-name{
            width: 440px;
            margin-left: 30px;
        }

        .project-town{
            width: 170px;
            margin-left: 30px;
        }

        .project-year{
            width: 80px;
            margin-left: 30px;
            text-align: center;
        }

        .project-time{
            width: 200px;
            text-align: center;
            margin-left: 30px;
        }

        .project-operate{
            width: 270px;
            margin-left: 30px;
            text-align: center;
            flex-shrink: 30;
            display: flex;
            justify-content: space-around;

            a{
                color: #fff;

                &:hover{
                    color: #52CCFF;
                }
            }
        }

        .list-warp{
            height: 600px;
        }
    }
</style>